<template>
  <div class="login-view" style="width: 100%;display: flex;margin-top: 60px;">
    <div class="logo-login">
      <img src="https://www.ketangpai.cn/images/common/logo_blue.png" style="display: flex;max-width: 136px;max-height: 34px;" @click="home">
    </div>
    <div class="login-content" style="display: flex;">
      <div class="login-left">
        <img src="https://www.ketangpai.cn/images/login/newbg.png" style="display: flex;height: 538px;margin-right: -100px;">
      </div>
      <div class="login-right" style="width: 431px;height: 538px;">
        <div class="right-content">
          <div class="right-title" style="text-align: center;margin-top: 20px;">
            <span style="font-size: 22px;font-weight: 700;">账户登录</span>
          </div>
          <ul style="list-style-type: none;margin-bottom: 12px;display: flex;justify-content: space-between;margin-left: 0px;text-align: center;padding-inline-start: 0px;">
            <li class="item">
              账号登录
              <i class="line" style="background-color: rgb(66, 133, 244);"></i>
            </li>
            <li class="item">
              手机短信登录
              <i class="line" style="background-color: rgb(66, 133, 244);"></i>
            </li>
            <li class="item">
              微信登录
              <i class="line" style="background-color: rgb(66, 133, 244);"></i>
            </li>
          </ul>
          <div class="login-tab">
            <el-form class="el-form" :model="ruleForm" :rules="rules" ref="loginForm" status-icon>
              <el-form-item prop="username">
                <el-input type="text" v-model="ruleForm.username" autocomplete="off" placeholder="请输入邮箱/手机号/账号"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input class="el-password" type="password" v-model="ruleForm.password" placeholder="请输入密码" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div class="flex-between">
              <span class="el-check">
                <input type="checkbox">
                <span class="el-check-text">下次自动登录</span>
              </span>
              <button class="el-check-button">
                <span style="color: rgb(116, 120, 124);">忘记密码？</span>
              </button>
            </div>
            <div class="bottom-box" style="margin-top: 12px;text-align: center">
              <el-button class="top-button" type="primary" @click="login()">
                <span style="font-size: 14px;">登录</span>
              </el-button>
              <div class="bottom-button" style="margin-top: 15px;">
                <p style="float: right;">
                  还没有账号？
                  <button class="bottom-button" @click="create()" style="float: right;border: none;background-color: white;color: #4285f4;cursor: pointer;font-size: 15px;">去注册</button>
                </p>
              </div>
              <div class="qr-box">
                <div class="qr-code"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// import { ElMessage } from 'element-plus';
// import { getCurrentInstance } from 'vue';
import { post } from '../../utils/request';
import Storage from '@/utils/storage';

export default {
  
  name: 'UserLogin',
  setup() {
    const ruleForm = ref({
      username: "",
      password: ""
    });
// const { proxy } = getCurrentInstance();

    const loginForm = ref(null); // 创建一个 ref 来引用 el-form 实例

    // 声明验证函数
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    // 定义验证规则
    const rules = ref({
      username: [
        { required: true, message: '请输入邮箱/手机号/账号', trigger: 'blur' }
      ],
      password: [
        { validator: validatePass, trigger: 'blur' }
      ]
    });

    const router = useRouter();

    const login = async () => {
      console.log("login")
      const valid = await validate();
      console.log(valid);
      if (valid) {
        try {
          const response = await post('/user/login', {
          account: ruleForm.value.username,
          password: ruleForm.value.password
        });
        window.sessionStorage.removeItem('user')
        console.log(response)
        console.log(response.code)
        if (response) {
          
          Storage.setSession("user", response.data);
          // 重定向到首页或其他页面
          router.push('/main');
        }
        } catch (e) {
          console.log(e);
        }
      }
    };

    const create = () => {
      router.push('/register');
    };

    const home = () => {
      const user = window.sessionStorage.getItem("user");
      if (user != null) {
              router.push('/main');

      }else router.push('/')
    };

    const validate = async () => {
      return new Promise((resolve) => {
        if (loginForm.value) {
          loginForm.value.validate((valid) => {
            resolve(valid);
          });
        } else {
          resolve(false);
        }
      });
    };

    return {
      ruleForm,
      rules,
      loginForm, // 确保返回 loginForm
      login,
      create,
      home,
      validate
    };
  }
};
</script>
<style>
.logo-login {
  margin-left: 60px;
  margin-top: -15px;
  cursor: pointer;
}
.login-content {
  margin-top: 50px;
}
.right-content {
  width: 431px;
  height: 473px;
  padding: 0 35px;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 61px 0 rgba(85, 108, 144, 0.07);
}
.item {
  cursor: pointer;
  position: relative;
  padding-bottom: 9px;
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #74787c;
  line-height: 32px;
}
.line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  width: 60px;
  height: 2px;
}
.el-password {
  height: 48px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-check-text {
  display: inline-block;
  padding-left: 10px;
  line-height: 19px;
  font-size: 14px;
}
.el-check-button {
  border: none;
  background-color: white;
  cursor: pointer;
}
.top-button {
  width: 100%;
  height: 48px;
  padding: 4px 0;
  margin-top: 30px;
  color: #fff;
  background-color: #4285f4;
  border-color: #4285f4;
  cursor: pointer;
  border-radius: 4px;
}
.qr-code {
  position: relative;
  top: 49px;
  left: -35.1px;
  height: 70px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: url('https://www.ketangpai.cn/img/qr-all.e16b084f.png') no-repeat 0 0 / cover;
  transform: rotateY(180deg);
}
</style>